<template>
  <el-dialog :before-close="handleClose"
             :close-on-click-modal="false"
             :visible="receiveDialogVisible"
             title="商品领取"
             @close="handleClose"
             @open="handleOpen">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button icon="el-icon-search" style="float: right; padding: 11px;" type="primary" @click="getSaleInfo">查询
        </el-button>
        <el-input ref="codeRef" v-model="code" clearable placeholder="扫码商品兑换码" style="width: 70%;float: left;"
                  type="password" @change="handleChange"></el-input>
      </div>
      <el-table :data="tableData" border height="420" stripe style="width: 100%;">
        <el-table-column align="center" label="商品名称" prop="commodityName"></el-table-column>
        <el-table-column align="center" label="数量" prop="quantity"></el-table-column>
        <el-table-column align="center" label="购买站点" prop="stationName"></el-table-column>
        <el-table-column align="center" label="购买时间" prop="payDate"></el-table-column>
        <el-table-column align="center" label="支付方式" prop="payTypeName"></el-table-column>
        <el-table-column align="center" label="商品条码" prop="barcode"></el-table-column>
      </el-table>
      <el-button v-show="received" style="margin: 10px;float: right;" type="danger">商品已领取</el-button>
      <el-button v-show="!received" :disabled="received || !code || code !== commodityInfo.uid" icon="el-icon-check"
                 style="margin: 10px;float: right;" type="primary" @click="doReceiveCommodity">确定领取
      </el-button>
    </el-card>
  </el-dialog>
</template>

<script>
import {mapGetters} from 'vuex'
import {getSaleCommodityInfo, receiveCommodity} from '@/api/store'

export default {
  name: 'ReceiveDialog',
  data () {
    return {
      commodityInfo: {},
      memberList: [],
      currentPage: 1,
      nameToFilter: '',
      code: '' // 兑换码
    }
  },
  computed: {
    ...mapGetters([
      'stationName',
      'stationId',
      'receiveDialogVisible',
      'operator'
    ]),
    tableData () {
      return this.commodityInfo.detailList || []
    },
    // 是否已领取
    received () {
      return this.commodityInfo && this.commodityInfo.status === 1
    }
  },
  mounted () {
  },
  methods: {
    handleClose () {
      this.$store.dispatch('hideReceiveDialog')
    },
    handleOpen () {
      this.$store.dispatch('showReceiveDialog')
      this.$nextTick(() => {
        this.$refs['codeRef'].focus()
        this.clearDataForm()
      })
    },
    getSaleInfo () {
      this.commodityInfo = {}
      getSaleCommodityInfo(this.code).then(res => {
        console.log(res)
        this.commodityInfo = res.data
        this.$message.success(res.msg || '查询成功')
      }).catch(err => {
        console.log(err)
        this.$message.error(err || '查询失败！')
      })
    },
    doReceiveCommodity () {
      // 如果购买站点和兑换站点不一致，提示不允许兑换
      if (this.stationId + '' !== this.commodityInfo.stationId + '') {
        this.$message.error('购买站点和兑换站点不一致！')
        return false
      }
      this.$confirm('是否确认领取该商品', '是否确认领取该商品？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        receiveCommodity(this.code, this.operator).then(res => {
          console.log(res)
          this.$message.success(res.msg || '商品领取成功')
          // TODO 打印小票，看后续是否有需要
          this.clearDataForm()
        }).catch(err => {
          console.log(err)
          this.$message.error(err || '商品领取失败')
        })
      }).catch(() => {
        console.log('取消确认')
      })
    },
    handleChange (value) {
      console.log('handleChange')
      if (!value) {
        this.commodityInfo = {}
      }
    },
    clearDataForm () {
      this.code = ''
      this.commodityInfo = {}
    }
  }
}
</script>

<style scoped>
.box-card {
  margin: 0 auto;
  overflow-y: auto;
}

.clearfix:before, .clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.title {
  font-size: 18px;
  font-weight: bold;
  line-height: 36px;
}

.pager {
  width: 100%;
  text-align: center;
  background: white;
}
</style>